
<template>
    <view class="container">
        <!-- 用户信息 -->
        <view class="user-bg">
            <image class="bg" src="/static/image/bg/my.jpg" mode="aspectFill"></image>
            <view class="user-info">
                <view class="profile-circle">
                    <image src="/static/image/bg/bg1.jpg" mode="aspectFill"></image>
                </view>
                <text>{{userData.username}}</text>
            </view>
        </view>
        <!-- 列表：操作清单 -->
        <view v-for="(item,index) in userMenu" :key="index">
            <uni-list-item :show-extra-icon="true" showArrow
                :extra-icon="item" :title="item.name" link
                @click="handleMenuItemClick(index)"/>
        </view>
    <!-- 修改密码弹窗 -->
    <view>
        <uni-popup ref="updatePasswordDialog" type="dialog">
            <uni-popup-dialog ref="inputClose" mode="input" title="修改密码"
             placeholder="请输入新密码" @confirm="updatePasswordConfirm">
            </uni-popup-dialog>
        </uni-popup>
    </view>
    </view>
</template>



.: 11-25 14:18:42
<script>
    // 引入用户菜单
    import {
        userMenu
    } from "../../commons/mock.js";
    export default {
        data() {
            return {
                //用户接受从登录页面传递过来的用户信息
                userData: {},
                //用户菜单
                userMenu
            }
        },
        // 登录拦截
        onShow() { //每次显示个人中心界面时，均验证用户是否存在。--修改密码后也要验证
            const loginUserData = uni.getStorageSync('userData');
            if (!loginUserData) {
                // 如果没有用户数据，则跳转到登录界面
                uni.redirectTo({
                    url: "/pages/login_register/login_register"
                });
            } else {
                // 将登录用户信息传递给个人中心也没得 userData
                this.userData = loginUserData;
            }
        },
        methods: {
            // 修改密码功能实现
            updatePasswordConfirm(newPassword) {
              // 接收的数据
              const updateData = {
                phoneNumber: '12345678910', //若本地缓存有，则从本地缓存读取
                newPassword: newPassword,
                oldPassword: '123456', //输入的旧密码与后端进行对比
              }
            
              console.log(JSON.stringify(updateData));
              uni.request({
                url: 'https://apifoxmock.com/m1/5460619-0-default/updatePassword',
                method: 'PUT',
                header: {
                  'Content-Type': 'application/json' // 设置请求头，表明发送的是 JSON 数据
                },
                data: JSON.stringify(updateData), // 将数据转换为 JSON 字符串
                success: (res) => {
                  console.log(res);
                  if (res.data.statusCode === 200) {
                    //修改成功，弹出成功消息提示框
                    uni.showToast({
                      title: res.data.message,
                      icon: 'success'
                    });
                  } else if (res.data.statusCode === 400) {
                    // 修改失败,弹窗提示消息
                    uni.showToast({
                      title: res.data.message,
                      icon: "error"
                    })
                  }
                },
                fail: (err) => {
                  // 请求失败，处理失败逻辑
                  console.error('请求失败', err);
                  // 可以在这里显示网络错误等信息给用户
                }
              });
            },
            // 判断点击了哪个操作项
            handleMenuItemClick(index) {
                if (index === 0) {
                    console.log("歌曲收藏");
                    // 跳转到我喜欢页面
                    uni.navigateTo({
                        url:"/pages/favorite/favorite",
                        })
                        
                }
                if (index === 1) {
                    console.log("修改密码");
                    // 打开密码修改对话框
                     this.$refs.updatePasswordDialog.open();
                }
                if (index === 2) {
                    console.log("退出登录");
                    uni.clearStorageSync(); // 清空本地缓存
                     uni.switchTab({ url: "/pages/index/index" // 跳转到首页
                 });
                }
            }
        }
    }
</script>

<style lang="scss">
    // 用户信息展示区
    .user-bg {
        width: 100%;
        height: 38vh;
        position: relative;
        overflow: hidden;

        // 背景图
        .bg {
            width: 100%;
            height: 100%;
        }

        // 用户信息
        .user-info {
            position: absolute;
            left: 50%;
            top: 60%;
            transform: translate(-50%, -50%);
            text-align: center;

            // 用户头像
            .profile-circle {
                position: relative;
                width: 180rpx;
                height: 180rpx;

                image {
                    margin: 20rpx 0;
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    // 多重阴影效果
                    box-shadow: 0 0 0 10rpx white, 0 0 0 20rpx #00c273, 0 0 0 30rpx white;
                }
            }

            // 用户名
            text {
                display: block;
                margin-top: 35rpx;
                font-weight: bold;
                margin-top: 60rpx;
            }
        }
    }
</style>